<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            left: 80px;
            top: -20px;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        .avatar {
            width: 100px;
            height: 100px;
            /*display: block;*/
        }


    </style>
</head>

<body>
<div id="app">
    <!--    头部返回-->
<!--    <el-page-header @back="goBack":title="title" content="设置">-->
<!--    </el-page-header>-->
    <span style="color: red"><a href="index.html"><-返回</a></span>

    <!--    导航栏-->
    <div class="content-header">
        <el-tabs type="border-card">
            <el-tab-pane >
                <span slot="label"><i class="el-icon-date"></i> 资料设置</span>
                <el-divider></el-divider>
                <div class="app-container">
                    <!--    用户头像上传-->
                    <!--    <el-input label="头像"></el-input>-->
                    <label class>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;头像</label>
                    <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl"
                             class="avatar">

                        <el-avatar icon="el-icon-user-solid" size="number"></el-avatar>
                    </el-upload>


                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="昵称">
                            <el-input v-model="form.name" style="width: 400px"></el-input>
                        </el-form-item>
                        <el-form-item label="手机账号">
                            <el-input v-model="form.number" style="width: 400px"></el-input>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                                style="width: 400px;"></el-date-picker>
                            </el-col>

                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.resource">
                                <el-radio label="女"></el-radio>
                                <el-radio label="男"></el-radio>
                                <el-radio label="其他"></el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="最高学历">
                            <el-radio-group v-model="form.type">
                                <el-radio label="博士" name="type"></el-radio>
                                <el-radio label="研究生" name="type"></el-radio>
                                <el-radio label="本科" name="type"></el-radio>
                                <el-radio label="专科" name="type"></el-radio>
                                <el-radio label="高中" name="type"></el-radio>
                                <el-radio label="初中" name="type"></el-radio>
                                <el-radio label="小学" name="type"></el-radio>
                                <el-radio label="其他" name="type"></el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="个人简介">
                            <el-input type="textarea" v-model="form.desc" style="width: 400px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                            <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                    </el-form>
                </div>
            </el-tab-pane >

            <el-tab-pane label="账号设置">
                <el-divider></el-divider>
                <div>
                    <label>当前注册账号：</label>
                    <el-input
                            style="width: 400px "
                             placeholder="请输入手机号"
                             v-model="input1"
                             clearable></el-input>
                    <label style="color: #8cc5ff">学习记录以当前登陆账号为准</label>
                    <el-divider></el-divider>
                    <label>手机账号：</label>
                    <el-input
                            style="width: 400px"
                            placeholder=""
                            ></el-input>
                </div>

            </el-tab-pane>
        </el-tabs>
    </div>

</div>
</body>

<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var Main = {
        data() {
            return {
                activeIndex: "1",
                imageUrl: '',
                input: '',
                input1:'',
                form: {
                    name: '',
                    number: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            };
        },
        methods: {
            goBack() {
               console.log("go back")
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式！');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB！');
                }
                return isJPG && isLt2M;
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>